/* eslint-disable react-refresh/only-export-components */
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
import { NavBar, SearchBar, List, IndexBar, ErrorBlock } from 'antd-mobile'
// 导入接口
import { getCityListApi, searchCityApi, getLocationApi } from '../../api/news'
// 导入模块化的样式
import styles from './css/city.module.css'
import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { updateCity } from '../../store/slice/ticket'
import { useDebounce2 } from '../../hooks'
import SearchResult from './components/SearchResult'
import CityLocation from './components/CityLocation'
import HotCity from './components/HotCity'

// 城市列表页面
function CityList() {
  const [debounceFn] = useDebounce2()
  const dispatch = useDispatch()
  const nav = useNavigate()
  const [historyList, setHistoryList] = useState(
    // JSON.parse(localStorage.getItem('history') || '[]')
    JSON.parse(localStorage.getItem('history')) || []
  )
  // 存储获取到的列表数据
  const [list, setList] = useState([])
  // 用来解析 URL 中 ? 后面的查询参数
  const [search] = useSearchParams()
  // 通过调用 .get('参数名') 就可以获取到指定参数的值
  console.log(search.get('type'))

  // 调用路由中的这个新Hook（主推的新特性），来获取 loader return 的数据
  const loaderData = useLoaderData()
  console.log('组件中打印的 loader Data 数据')
  console.log(loaderData)

  // 搜索关键词
  const [wd, setWd] = useState('')
  useEffect(() => {
    // 封装获取搜索列表的函数
    async function getSearch() {
      // 如果 wd 为空字符串，则 return 出去，不要调接口，否则会报错！
      if (!wd) return
      const { data: res } = await searchCityApi(wd)
      setList(res)
    }

    debounceFn(
      () => {
        // 调用函数
        getSearch()
      },
      500,
      false
    )
  }, [wd])

  // 把用户点击的城市，存储到全局 Store
  const setCity = (city) => {
    const obj = { type: search.get('type'), city }
    dispatch(updateCity(obj))
    // 把用户点击的城市，存入城市列表
    // new Set(数组)
    const set = new Set([city, ...historyList])
    setHistoryList(Array.from(set))
    nav(-1)
  }

  // 每个基础知识点大家掌握的都不牢固
  // 所以，讲师补基础 + 讲项目功能的思路 + 代码实现 + 布局（HTML + 样式）
  // 亡羊补牢，还不算晚

  // 清空内存中的搜索历史记录
  const clearHistory = () => setHistoryList([])

  // 监听搜索历史的变化，把最新的搜索历史存储到本地
  useEffect(() => {
    localStorage.setItem('history', JSON.stringify(historyList))
  }, [historyList])

  return (
    <div className={styles.box}>
      {/* 头部的搜索栏 */}
      <div className={styles.searchbar}>
        <NavBar onBack={() => nav(-1)}>
          {/* 搜索框组件 */}
          <SearchBar
            placeholder="请输入城市关键字"
            // 获取用户输入的最新的内容
            onChange={(val) => setWd(val)}
          />
        </NavBar>
      </div>

      {/* 搜索结果 + 搜索历史记录 */}
      {wd.length > 0 && (
        <div>
          {/* 搜索的结果列表 */}
          <List header="搜索结果">
            {list.map((item, i) => (
              <List.Item
                key={i}
                onClick={() => setCity(item.name)}
              >
                {item.name}
              </List.Item>
            ))}
          </List>

          {/* 空状态 */}
          {list.length === 0 && <ErrorBlock status="empty" />}

          {/* 搜索历史 */}
          <SearchResult
            myfn={setCity}
            clear={clearHistory}
            list={historyList}
          />
        </div>
      )}

      {/* 城市定位 + 热门城市 + 城市列表 */}
      {wd.length === 0 && (
        <div className={styles.cityList}>
          <div className={styles.top}>
            {/* 城市定位的组件 */}
            <CityLocation myfn={setCity} />
            {/* 父传子，把父组件中的函数，传入子组件 */}
            <HotCity myfn={setCity} />
          </div>

          {/* IndexBar 组件 */}
          {/* 窗口高度 - Header高度 - 热门城市区域高度 */}
          {/*  */}
          <IndexBar
            style={{ height: window.innerHeight - 45 - 180, marginTop: 180 }}
          >
            {loaderData.list.map((group) => {
              const { title, items } = group
              return (
                <IndexBar.Panel
                  index={title}
                  title={`标题${title}`}
                  key={`标题${title}`}
                >
                  <List>
                    {items.map((item, index) => (
                      <List.Item
                        key={index}
                        onClick={() => setCity(item.name)}
                      >
                        {item.name}
                      </List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      )}
    </div>
  )
}

export default CityList

export const loader = async () => {
  const { data: res } = await getCityListApi()
  // 调用高德的接口，请求地理定位
  // const { data: res2 } = await axios.get(
  //   'https://restapi.amap.com/v3/ip?key=07e54ffb9d2dfaf8f7fdae8f5e1c6e2d'
  // )

  // 调用老师提供的地理定位的 API
  const { data: res2 } = await getLocationApi(
    '07e54ffb9d2dfaf8f7fdae8f5e1c6e2d'
  )
  return { list: res.cityList, hot: res.hotCities, city: res2.city }
}
